<template>
  <div id="HasPaymentTable">
    <search-order
      ref="searchOrder"
      @clickSearch="($event) => { conditions = $event;  loadData() }"
      @clickRefresh="clickRefresh('searchOrder')">
    </search-order>
    <table
      border="1" cellspacing="0" bordercolor="#f8f8f8"
      v-loading="dataLoading"
      element-loading-text="加载中"
      element-loading-background="rgba(255, 255, 255, 0.8)"
    >
      <thead>
      <tr>
        <td>商品名称</td>
        <td>规格</td>
        <td>数量</td>
        <td width="80px">金额</td>
        <td width="80px">预约时间</td>
        <td width="50px">状态</td>
        <td width="120px">备注</td>
        <td width="80px">操作</td>
      </tr>
      </thead>
      <tbody>
      <tr v-if="!tableData" class="empty_tip">
        <td colspan="8">
          <span>暂无数据</span>
        </td>
      </tr>
      <slot v-if="tableData" v-for="(item) in tableData">
        <tr class="row_title" :key="`base${item.orderno}`">
          <td colspan="8">
            <span>订单编号</span><span>{{ item.orderno || '-' }}</span>
            <span>下单时间</span><span>{{ item.createdate || '-' }}</span>
            <span>手机号</span><span>{{ item.telephone || '-' }}</span>
            <span>下单人</span><span>{{ item.nickname || '-' }}</span>
          </td>
        </tr>
        <tr :key="`con${item.orderno}`">
          <td>
            <img src="" alt="">
            <span>{{ item.ordername }}</span>
          </td>
          <td><span>{{ item.saleOrderDetailList[0].specName }}</span></td>
          <td><span>{{ item.saleOrderDetailList[0].quantity }}</span></td>
          <td><span>{{ `￥ ${item.saleOrderDetailList[0].totalPrice}` }}</span></td>
          <td><span>{{ item.appointTiemStart }}</span></td>
          <td><span>已付款</span></td>
          <td><span>{{ item.remarks }}</span></td>
          <td>
            <deal-btn :item="item" :whichTab="'已付款'" :state="state" @loadData="loadData"
              @activeDataLoading="dataLoading = true" @closeDataLoading="dataLoading = false"></deal-btn>
          </td>
        </tr>
      </slot>
      </tbody>
    </table>
    <el-pagination
      v-if="tableData"
      layout="prev, pager, next"
      :page-count="pageInfo.pageCount"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.currentPage"
      @current-change="loadData"
    >
    </el-pagination>
  </div>
</template>

<script>
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
import DealBtn from '@/components/pages/order/DealOrder'
import SearchOrder from '@/components/pages/order/Search'

export default {
  name: 'HasPaymentTable',
  components: { DealBtn, SearchOrder },
  mounted () {
    this.$nextTick(() => {
      this.initPage()
    })
  },
  beforeRouteEnter (to, from, next) {},
  data () {
    return {
      tableData: null,
      pageInfo: { // 页面分页信息
        pageCount: 1,
        pageSize: 0,
        currentPage: 1
      },
      dataLoading: false,
      state: [3],
      conditions: null
    }
  },
  computed: {},
  watch: {},
  filters: {},
  methods: {
    initPage () {
      this.loadData()
    },
    async loadData (page = this.pageInfo.currentPage) {
      this.dataLoading = true // 打开加载框
      const response = await API.getOrderList({state: this.state, page, conditions: this.conditions})
      this.dataLoading = false
      const {code, data} = response
      if (code === 1) {
        this.tableData = data.rows
        this.pageInfo.pageCount = data.pageCount
        this.pageInfo.pageSize = data.pageSize
        this.pageInfo.currentPage = data.pageIndex
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    },
    clickRefresh (elName) {
      this.conditions = null
      this.$refs[elName].resetSearch()
      this.loadData()
    }
  }
}
</script>

<style scoped lang="scss">
  @import "common";
</style>
